<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<div class="row">
					<div align="center" class="title">
						<h1>简单的赛场管理<small>选手界面</small></h1>
					</div>
					<div class="table">
						<table class="table">
							<caption>选手信息</caption>
							<thead>
								<tr>
									<th>编号</th>
									<th>姓名</th>
									<th>所在地</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in list">
									<td>{{item.id}}</td>
									<td>{{item.name}}</td>
									<td>{{item.addr}}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<button style="border:none;background-color:#FFDDDD;"class="btn pull-right"><a href="./score.html" style="color: tomato;text-decoration: none;">前往评分页面</a></button>
				</div>
			</div>
		</div>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						list: null
					}
				},
				mounted() {
					axios
						.get('./player-list.php')
						.then(response => {
							this.list = response.data
						})
						.catch(function(error) {
							console.log(error);
						});
				}
			})
		</script>
	</body>
</html>
